<template>

  <section v-loading="loading">
    <el-row>
      <el-tabs v-model="stockPage" @tab-click="selStockPage">
        <el-tab-pane label="所有预约" name="allAppointment" >
          <el-collapse>
            <el-collapse-item  :name="appointment.id" v-for="appointment in allAppointmentList" :key="appointment.id">
              <template slot="title">
                {{appointment.id}}—{{appointment.userName}}—{{appointment.title}}-【{{comName(appointment.data.goodsTypeCode)}}】
                <span v-if="appointment.state === 1" style="color: green;font-weight: bold">已生成</span>
                <span v-if="appointment.state === 0" style="color: red;font-weight: bold">待生成</span>
              </template>
              <el-row v-for="(val,key,index) in appointment.data" :key="index" v-if="judeg(key)">
                <el-col :span="2" style="text-align: right">{{key}}
                </el-col>
                <el-col :span="10" style="margin-left: 30px">{{val}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="2" style="text-align: right">操作</el-col>
                <el-col :span="10" style="margin-left: 30px">
                  <el-button @click="buildProject(appointment)" size="mini" v-if="appointment.state === 0">生成</el-button>
                  <el-button @click="appointmentDetail(appointment)" size="mini" v-if="appointment.state === 1">查看进度</el-button>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
          <el-pagination v-show="totalPage>0" style="margin-top:10px;"
                         background
                         layout="prev, pager, next"
                         :page-count="totalPage"
                         @current-change="goPage">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="今日预约" name="todayAppointment">
          <el-row type="flex" align="middle" style="margin-bottom: 10px">
            <el-col :span="2">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            </el-col>
            <el-col :span="22">
              <el-button @click="btnUnit" size="mini">合并生成</el-button>
            </el-col>
          </el-row>
          <el-collapse >
            <el-collapse-item  :name="appointment.id" v-for="appointment in todayAppointments" :key="appointment.id">
              <template slot="title">
                <el-checkbox-group v-model="checkAppointments" @change="checkeBtn">
                  <el-checkbox :label="appointment">{{appointment.id}}—{{appointment.userName}}—{{appointment.title}}-【{{comName(appointment.data.goodsTypeCode)}}】
                    <span v-if="appointment.state === 1" style="color: green;font-weight: bold">已生成</span>
                    <span v-if="appointment.state === 0" style="color: red;font-weight: bold">待生成</span>
                  </el-checkbox>
                </el-checkbox-group>
              </template>
              <el-row v-for="(val,key,index) in appointment.data" :key="index" v-if="judeg(key)">
                <el-col :span="2" style="text-align: right">{{key}}
                </el-col>
                <el-col :span="10" style="margin-left: 30px">{{val}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="2" style="text-align: right">操作</el-col>
                <el-col :span="10" style="margin-left: 30px">
                  <el-button @click="buildProject(appointment)" size="mini" v-if="appointment.state === 0">生成</el-button>
                  <el-button @click="appointmentDetail(appointment)" size="mini" v-if="appointment.state === 1">查看进度</el-button>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="挂号" name="register">
          <el-collapse>
            <el-collapse-item  :name="appointment.id" v-for="appointment in selAppointments" :key="appointment.id">
              <template slot="title">
                {{appointment.id}}—{{appointment.userName}}—{{appointment.title}}-【{{comName(appointment.data.goodsTypeCode)}}】
                <span v-if="appointment.state === 1" style="color: green;font-weight: bold">已生成</span>
                <span v-if="appointment.state === 0" style="color: red;font-weight: bold">待生成</span>
              </template>
              <el-row v-for="(val,key,index) in appointment.data" :key="index" v-if="judeg(key)">
                <el-col :span="2" style="text-align: right">{{key}}
                </el-col>
                <el-col :span="10" style="margin-left: 30px">{{val}}</el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="中医体检" name="health_check">
          <el-collapse>
            <el-collapse-item  :name="appointment.id" v-for="appointment in selAppointments" :key="appointment.id">
              <template slot="title">
                {{appointment.id}}—{{appointment.userName}}—{{appointment.title}}-【{{comName(appointment.data.goodsTypeCode)}}】
                <span v-if="appointment.state === 1" style="color: green;font-weight: bold">已生成</span>
                <span v-if="appointment.state === 0" style="color: red;font-weight: bold">待生成</span>
              </template>
              {{appointment.data}}
              <el-row v-for="(val,key,index) in appointment.data" :key="index" v-if="judeg(key)">
                <el-col :span="2" style="text-align: right">{{key}}
                </el-col>
                <el-col :span="10" style="margin-left: 30px">{{val}}</el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </el-row>

    <el-dialog title="可选体检套餐" :visible.sync="showExaminationsDialog" >
      <section v-if="examinations.length >0">
        <el-row>
          <el-col :span="3">订单ID</el-col>
          <el-col :span="4">订单名</el-col>
          <el-col :span="6">规格</el-col>
          <el-col :span="4">操作</el-col>
        </el-row>
        <el-row v-for="(examination,i) in examinations" :key="i">
          <!--{{examination}}-->
          <el-row v-for="(orderItem,i2) in examination.orderItems" :key="i2" v-if="orderItem.data.goodsTypeCode === 'examination'">
            <el-row v-for="(val,key,index) in orderItem.data" :key="index" v-if="judeg(key)">
              <el-col :span="3">{{examination.id}}</el-col>
              <el-col :span="4">{{examination.title}}</el-col>
              <el-col :span="6">{{key}}:{{val}}</el-col>
              <el-col :span="4">
                <el-button @click="checkExaminationItems(orderItem)" size="mini">选择体检项</el-button>
              </el-col>
            </el-row>
          </el-row>
        </el-row>
      </section>
    </el-dialog>

    <el-dialog title="选择体检项" :visible.sync="showCheckExaminationsDialog" >
      <checkItems :currAppointment="currAppointment" @cancel="cancelDialog"></checkItems>
    </el-dialog>
    <el-dialog title="生成挂号" :visible.sync="showRegisterDialog" >
      <checkRegister :currAppointment="currAppointment" ></checkRegister>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import checkItems from "./checkItems";
  import checkRegister from "./checkRegister";
  export default {
    name: "appointment",
    components: {checkItems,checkRegister},
    data() {
      return {
        showRegisterDialog:false,
        loading:false,
        stockPage:'allAppointment',
        showExaminationsDialog:false,
        showCheckExaminationsDialog:false,
        isIndeterminate: false,
        allAppointmentList:[],//所有预约
        checkAll: false,
        checkAppointments:[],//选择的预约
        todayAppointments:[],//今日预约
        selAppointments:[],//挂号，中医体检预约
        goodsTypeList:[],
        examinations:[],
        currAppointment:null,
        totalPage:0,
      }
    },
    created(e){
      //加载预约列表
      this.getAppointmentList()
      this.getGoodsTypeList()
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getAppointmentList(val-1)
      },
      judeg(key){
        let pattern = new RegExp("[\u4E00-\u9FA5]+");
        let str = key
        if(pattern.test(str)){
          return true
        }
      },
      cancelDialog(){
        this.showExaminationsDialog=false
      },
      buildProject(a){
        console.log(a)
        this.currAppointment = a
        //判断预约的商品类型
        if(a.data.goodsTypeCode === 'register'){
          this.showRegisterDialog=true
          //生成当日挂号
          this.createRegister(a)
        }else if(a.data.goodsTypeCode === 'health_check'){
          this.loading=true
          //判断该用户是否有购买提交套餐
          this.getOrderList(a.userId)
        }
      },
      createRegister(a){

        // this.fetch({name:"createRegister",data:data})
        //   .then(res=>{
        //     console.log(res)
        //   })
        //   .catch(err=>{
        //     console.log(err)
        //     errHandler.handle(this,err)
        //   })
      },
      appointmentDetail(a){
        //查看已生成体检的预约，查看当前进度
        console.log(a)
        if(a.data.goodsTypeCode === 'health_check'){
          this.getExamine(a.data.id)
        }
      },
      getExamine(id){
        this.fetch({name:"getExamine",data:{id}})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getOrderList(userId){
        this.examinations=[]
        this.fetch({name:"getOrderList",data:{page:0,departmentId:this.department.id,userId}})
          .then(res=>{
            console.log(res)
            res.content.forEach(o=>{
              let index = o.orderItems.findIndex(i=>i.data.goodsTypeCode === 'examination')
              if(index >=0){
                this.examinations.push(o)
              }
            })
            if(this.examinations.length >0){
              console.log(this.examinations)
              this.showExaminationsDialog=true
              this.loading=false
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      comName(code){
        let tmp = this.goodsTypeList.find(g=>g.code === code)
        if(tmp){
          return tmp.name
        }else {
          return code
        }
      },
      getGoodsTypeList(){
        this.fetch({name:"getGoodsTypeList"})
          .then(res=>{
            console.log(res)
            this.goodsTypeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      // handleChange(val){
      //   // console.log(val)
      // },
      selStockPage(tab, event){
        console.log(tab, event)
        if(tab.name === 'todayAppointment'){
          //筛选预约
          this.todayAppointmentList()
        }else{
          this.selAppointmentList(tab.name)
        }
      },
      checkeBtn(val){//选中的预约数组
        let checkedCount = val.length;
        this.checkAll = checkedCount === this.todayAppointments.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.todayAppointments.length
      },
      getAppointmentList(pageNo){
        this.fetch({name:"getAppointmentList",data:{page:pageNo? pageNo:0}})
          .then(res=>{
            console.log('————————————————',res)
            this.allAppointmentList=res.content
            this.totalPage = res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      handleCheckAllChange(val){//有选择的地方用
        this.checkAppointments = val ? this.todayAppointments : [];
        this.isIndeterminate = false
      },
      btnUnit(){//合并生成预约项目

      },
      todayAppointmentList(){
        this.todayAppointments=[]
        let today=this.getDate(new Date())
        this.allAppointmentList.forEach(a=>{
          let appDay=this.getDate(new Date(a.date))
          if(today === appDay){
            this.todayAppointments.push(a)
          }
        })
        console.log(this.todayAppointments)
      },
      getDate(date){
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month < 10) {
          month = "0" + month;
        }
        if (day < 10) {
          day = "0" + day;
        }
        let nowDate = year + "-" + month + "-" + day;
        return nowDate
      },
      selAppointmentList(name){
        this.selAppointments=[]
        let today=this.getDate(new Date())
        this.allAppointmentList.forEach(a=>{
          if(a.data.goodsTypeCode === name){
            this.selAppointments.push(a)
          }
        })
      },
      checkExaminationItems(orderItem){
        console.log(orderItem)
        this.currAppointment.orderItem = orderItem
        this.showCheckExaminationsDialog=true
      },
    }
  }
</script>

<style scoped>

</style>
